<header>
    引入和初始化
</header>
<h2>
    Web端
</h2>
<pre tag="javascript">
import { Canvas } from 'vislite'

// 获取画笔
let painter = new Canvas(el)
</pre>
<p>
    其中el是画布的挂载点，比如可以是一个DIV节点。
</p>
<h3>
    配置
</h3>
<p>
    创建画笔的时候，你还可以传递一个参数来进行更精细的控制：
</p>
<pre tag="javascript">
new Canvas(el, {

    // Boolean类型，默认true，表示是否支持区域管理（v0.4.1开始支持）
    "region": boolean

})
</pre>
<h2>
    uni-app
</h2>
<p>
    我们提供的是一个uni-app组件，引入以后需要进行注册：
</p>
<pre tag="javascript">
import uiCanvas from 'vislite/uni-app/ui-canvas.vue'

export default {
    components:{
        uiCanvas
    }
};
</pre>
<p>
    注册完毕就可以在页面中使用了：
</p>
<pre tag="html">
    <ui-canvas ref='mycanvas' :width='400' :height='300'></ui-canvas>
</pre>
<p>
    然后获取画笔：
</p>
<pre tag="javascript">
this.$refs.mycanvas.fetch().then(painter => {
    // todo
})
</pre>
<p>
    此时，你就可以用这只画笔绘制你想要的内容了。
</p>
<p>
    稍微特殊一点的是，每次全部绘制完毕以后，都需要额外调用下面的方法刷新画布：
</p>
<pre tag="javascript">
painter.draw(reserve, callback)
</pre>
<div class="version">
    上述方法参数(reserve, callback) 0.4.1 新增
</div>
<p>
    均为可选参数：reserve默认false，如果设置为true，则保留当前画布上的内容；callback是一个函数，表示绘制完成后回调。
</p>
<h3>
    属性说明
</h3>
<table>
    <thead>
        <tr>
            <td>
                属性名
            </td>
            <td>
                类型
            </td>
            <td>
                默认值
            </td>
            <td>
                说明
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                width
            </td>
            <td>
                Number
            </td>
            <td>
                300
            </td>
            <td>
                画布的宽
            </td>
        </tr>
        <tr>
            <td>
                height
            </td>
            <td>
                Number
            </td>
            <td>
                150
            </td>
            <td>
                画布的高
            </td>
        </tr>
        <tr>
            <td>
                cover
            </td>
            <td>
                Boolean
            </td>
            <td>
                true
            </td>
            <td>
                是否使用原生canvas渲染（v0.2.0开始支持）
            </td>
        </tr>
        <tr>
            <td>
                region
            </td>
            <td>
                Boolean
            </td>
            <td>
                true
            </td>
            <td>
                是否支持区域管理（v0.4.1开始支持）
            </td>
        </tr>
    </tbody>
</table>
<h3>
    交互
</h3>
<p>
    由于环境的特殊性，我们提供了跨端的方法来帮助你更简单的实现交互：
</p>
<pre tag="html">
    <ui-canvas @dotouchstart='doit'></ui-canvas>
</pre>
<p>
    其中doit是定义的方法：
</p>
<pre tag="javascript">
methods: {
    doit(region) {
        
        // {"name":string,"x":number,"y":number}
        console.log(region)
    }
}
</pre>
<p>
    在你每次点击画笔的时候就会触发doit方法，此方法有一个行参，记录着你点击的区域信息。
</p>
<h3>
    完整用例
</h3>
<p>
    具体的例子可以直接访问：
    <a class="link" href="https://github.com/fragement-contrib/uni-app/blob/master/pages/example/line.vue" target="_blank">https://github.com/fragement-contrib/uni-app/blob/master/pages/example/line.vue</a>
</p>
<h2>
    微信小程序
</h2>
<p>
    首先，你需要确定你进行了npm构建，如果不清楚如何构建，你可以：
</p>
<button tag="miniprogram-npm" type="explain">点击查看如何构建？</button>
<p>
    然后注册组件：
</p>
<pre tag="javascript">
// page.json
{
    "usingComponents": {
        "ui-canvas": "vislite/miniprogram/ui-canvas/index"
    }
}
</pre>
<p>
    注册完毕就可以在页面中使用了：
</p>
<pre tag="html">
    <ui-canvas id='mycanvas' width='400' height='300'></ui-canvas>
</pre>
<p>
    然后获取画笔：
</p>
<pre tag="javascript">
this.selectComponent('#mycanvas').fetch().then(painter => {
    // todo
})
</pre>
<p>
    此时，你就可以用这只画笔绘制你想要的内容了。
</p>
<h3>
    属性说明
</h3>
<table>
    <thead>
        <tr>
            <td>
                属性名
            </td>
            <td>
                类型
            </td>
            <td>
                默认值
            </td>
            <td>
                说明
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                width
            </td>
            <td>
                Number
            </td>
            <td>
                300
            </td>
            <td>
                画布的宽
            </td>
        </tr>
        <tr>
            <td>
                height
            </td>
            <td>
                Number
            </td>
            <td>
                150
            </td>
            <td>
                画布的高
            </td>
        </tr>
        <tr>
            <td>
                region
            </td>
            <td>
                Boolean
            </td>
            <td>
                true
            </td>
            <td>
                是否支持区域管理（v0.4.1开始支持）
            </td>
        </tr>
    </tbody>
</table>
<h3>
    交互
</h3>
<pre tag="html">
    <ui-canvas bind:dotouchstart="doit"></ui-canvas>
</pre>
<p>
    其中doit是定义的方法：
</p>
<pre tag="javascript">
Page({
    doit(event) {

        // {"name":string,"x":number,"y":number}
        console.log(event.detail)
    }
})
</pre>
<p>
    在你每次点击画笔的时候就会触发doit方法，此方法的形参有一个属性detail，记录着你点击的区域信息。
</p>
<h3>
    完整用例
</h3>
<p>
    具体的例子可以直接访问：
    <a class="link" href="https://github.com/fragement-contrib/WeChat-Miniprogram/blob/master/miniprogram/pages/example/line" target="_blank">https://github.com/fragement-contrib/WeChat-Miniprogram/blob/master/miniprogram/pages/example/line</a>
</p>